<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>Show a please wait image for an AJAX request.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2006 Roderick Divilbiss">
<script type="text/javascript">
// code to create and make AJAX request
function getFile(pURL) {
    if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
        xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }

    // if we have created the xmlhttp object we can send the request
    if (typeof(xmlhttp)=='object') {
        xmlhttp.onreadystatechange=xmlhttpResults;
        xmlhttp.open('GET', pURL, true);
        xmlhttp.send(null);
        // replace the submit button image with a please wait for the results image.
        document.getElementById('theImage').innerHTML = '<img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_wait.gif" alt="Please Wait for AJAX Results">';
    // otherwise display an error message
    } else {
        alert('Your browser is not remote scripting enabled. You can not run this example.');
    }
}

// function to handle asynchronous call
function xmlhttpResults() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) {
            // we use a delay only for this example
            setTimeout('loadResults()',3000);
        }
    }
}

function loadResults() {
    // put the results on the page
    document.getElementById('nextDropDown').innerHTML = xmlhttp.responseText;
    // replace the please wait image with the results are ready image
    document.getElementById('theImage').innerHTML = '<img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_ready.gif" alt="AJAX Results Ready">';
    // delay for 2 seconds before resetting the submit image button.
    setTimeout('resetImage()',2000);
}


function resetImage() {
    // show the submit image button for another AJAX call.
    document.getElementById('theImage').innerHTML = '<a href="javascript:void(0);" onclick="getFile(\'http://localhost/test/ajax2/t14/wait.php?theImage=\'+document.getElementById(\'letter\')[document.getElementById(\'letter\').selectedIndex].value)"><img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_submit.gif" alt="Submit AJAX Request" type="image"><\/a>';
}
</script>
<style>
<!--
#submitImage {
    vertical-align: text-bottom;
    padding-top: 3px;
}
-->
</style>
</head>

<body>
<p>Select A Letter: 
<select size="1" name="letter" id="letter">
  <option value="A">States beginning with A</option>
  <option value="C">States beginning with C</option>
  <option value="D">States beginning with D</option>
  <option value="F">States beginning with F</option>
  <option value="G">States beginning with G</option>
  <option value="H">States beginning with H</option>
  <option value="I">States beginning with I</option>
  <option value="K">States beginning with K</option>
  <option value="L">States beginning with L</option>
  <option value="M">States beginning with M</option>
  <option value="N">States beginning with N</option>
  <option value="O">States beginning with O</option>
  <option value="P">States beginning with P</option>
  <option value="R">States beginning with R</option>
  <option value="S">States beginning with S</option>
  <option value="T">States beginning with T</option>
  <option value="U">States beginning with U</option>
  <option value="V">States beginning with V</option>
  <option value="W">States beginning with W</option>
</select>
&nbsp;
<span id="theImage">
  <a href="javascript:void(0);" onclick="getFile('http://localhost/test/ajax2/t14/wait.php?theImage='+document.getElementById('letter')[document.getElementById('letter').selectedIndex].value)">
    <img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_submit.gif" alt="Submit AJAX Request" type="image">
  </a>
</span>
</p>
<p>AJAX (remote query) Results: 
<span id="nextDropDown">
  <select size="1" name="tempSelect">
    <option>Choose A Letter Above</option>
  </select>
</span>
</body>

</html>